<div style="width: 700px">
  <d-transfer
    [disabled]="disabled"
    [sourceOption]="sourceOption1"
    [isSearch]="true"
    [showOptionTitle]="true"
    [noResultTemplate]="noDataTpl"
    [titles]="{ source: 'Source', target: 'Target' }"
    (afterTransfer)="afterTransfer($event)"
  >
  </d-transfer>
</div>
<br />
Disabled: <d-toggle (change)="onChange($event)"></d-toggle>

<div style="width: 700px; margin-top: 20px">
  <d-transfer
    [sourceOption]="sourceOption2"
    [targetOption]="targetOption2"
    [isSearch]="true"
    [titles]="{ source: 'Source', target: 'Target' }"
    (searching)="search($event)"
    (transferring)="transfer($event)"
  >
  </d-transfer>
</div>

<ng-template #noDataTpl let-position="position" let-sourceKeyword="sourceKeyword" let-targetKeyword="targetKeyword">
  <div class="no-data-tip">
    <i class="icon-advisory"></i>
    <span>
      {{
        (position === 'source' && sourceKeyword) || (position === 'target' && targetKeyword) ? 'No records found.' : 'No data available.'
      }}
    </span>
  </div>
</ng-template>
